<template>
  <div class="box" style="height: 600px;overflow-y: scroll">
    <el-button icon="el-icon-download" size="mini" type="primary" @click="handlerExport()"  style="height:35px;">个人导出</el-button>
    <el-collapse v-model="active" >
      <el-collapse-item title="分居费" name="1">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">分居费<el-button @click.stop="openEdit('separation',0)" icon="el-icon-circle-plus" v-if="row.separation.length===0" v-has-permi="['admin:enjoy:save']" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
          :data="row.separation"
          stripe
          style="width: 100%">
          <el-table-column prop="name" label="配偶姓名"/>
          <el-table-column prop="id_card" label="身份证号"/>
          <el-table-column prop="marriage_time" label="结婚时间"/>
          <el-table-column prop="household" label="户籍"/>
          <el-table-column prop="work" label="工作单位"/>
          <el-table-column prop="apply_time" label="申请时间"/>
          <el-table-column prop="approve_time" label="批准时间"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" v-has-permi="['admin:enjoy:info']" size="mini" @click="openEdit('separation',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" v-has-permi="['admin:enjoy:delete']" size="mini" @click="handlerOpenDel('separation',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">随军未就业<el-button @click.stop="openEdit('noEmploy',0)" v-has-permi="['admin:enjoy:save']"  v-if="row.noEmploy.length==0" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
            :data="row.noEmploy"
            stripe
            style="width: 100%">
          <el-table-column prop="name" label="配偶姓名"/>
          <el-table-column prop="id_card" label="身份证号"/>
          <el-table-column prop="marriage_time" label="结婚时间"/>
          <el-table-column prop="army_time" label="随军时间"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('noEmploy',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('noEmploy',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">子女保教费<el-button @click.stop="openEdit('educationFee',0)" v-has-permi="['admin:enjoy:save']" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
            :data="row.educationFee"
            stripe
            style="width: 100%">
          <el-table-column prop="name" label="子女姓名"/>
          <el-table-column prop="id_card" label="身份证号"/>
          <el-table-column prop="birthDate" label="出生年月"/>
          <el-table-column prop="age" label="年龄"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('educationFee',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('educationFee',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">父母赡养费<el-button @click.stop="openEdit('provide',0)" v-has-permi="['admin:enjoy:save']" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
            :data="row.provide"
            stripe
            style="width: 100%">
          <el-table-column prop="title" label="称谓"/>
          <el-table-column prop="name" label="父母姓名"/>
          <el-table-column prop="id_card" label="身份证号"/>
          <el-table-column prop="age" label="年龄"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('provide',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('provide',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="5">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">父母赡养补助<el-button @click.stop="openEdit('supportAllowance',0)" v-has-permi="['admin:enjoy:save']" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
          :data="row.supportAllowance"
          stripe
          style="width: 100%">
          <el-table-column prop="parentsName" label="申领父母姓名"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column prop="nation" label="民族"/>
          <el-table-column prop="idCard" label="公民身份证"/>
          <el-table-column prop="workUnit" label="工作单位"/>
          <el-table-column prop="registeredResidence" label="户籍所在地"/>
          <el-table-column prop="currentAddress" label="现住址"/>
          <el-table-column prop="startingTimeOfApplication" label="申领起起始时间"/>
          <el-table-column prop="stopSendingTime" label="停发时间"/>
          <el-table-column prop="contactPhoneNumber" label="联系电话"/>
          <el-table-column prop="remarks" label="备注"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('supportAllowance',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('supportAllowance',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="6">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">未随军无工作配偶生活补贴<el-button @click.stop="openEdit('notArmy',0)" v-has-permi="['admin:enjoy:save']" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
          :data="row.notArmy"
          stripe
          style="width: 100%">
          <el-table-column prop="spouseName" label="配偶姓名"/>
          <el-table-column prop="registeredResidence" label="户籍所在地"/>
          <el-table-column prop="citizenIdNumber2" label="公民身份证号"/>
          <el-table-column prop="citizenIdNumber3" label="公民身份证号"/>
          <el-table-column prop="marriageDate" label="结婚时间"/>
          <el-table-column prop="unemploymentTime" label="未就业时间"/>
          <el-table-column prop="contactTime" label="联系时间"/>
          <el-table-column prop="remarks" label="备注"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('notArmy',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('notArmy',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="7">
        <template slot="title">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between">慰问、救济<el-button @click.stop="openEdit('comfort',0)" v-has-permi="['admin:enjoy:save']" icon="el-icon-circle-plus" style="margin-right: 20px" size="mini" type="primary">新增</el-button></div>
        </template>
        <el-table
          :data="row.comfort"
          stripe
          style="width: 100%">
          <el-table-column prop="reasonsForCondolenceAndRelief" label="慰问、救济事由"/>
          <el-table-column prop="distributionAmount" label="发放金额"/>
          <el-table-column prop="distributionTime" label="发放时间"/>
          <el-table-column prop="remarks" label="备注"/>
          <el-table-column width="180" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-has-permi="['admin:enjoy:info']" @click="openEdit('comfort',1,scope.$index)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" v-has-permi="['admin:enjoy:delete']" @click="handlerOpenDel('comfort',scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <el-button @click="handleSubmit" style="margin-top: 30px" type="primary">确定</el-button>
    <el-dialog
      :visible.sync="modal.separation"
      :title="'分居费'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <separation
        v-if="modal.separation"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('separation')"
        @separation="initData($event,'separation')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.noEmploy"
      :title="'随军未就业'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <no-employ
        v-if="modal.noEmploy"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('noEmploy')"
        @noEmploy="initData($event,'noEmploy')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.educationFee"
      :title="'子女保教费'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <education-fee
        v-if="modal.educationFee"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('educationFee')"
        @educationFee="initData($event,'educationFee')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.provide"
      :title="'父母赡养费'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <provide
        v-if="modal.provide"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('provide')"
        @provide="initData($event,'provide')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.supportAllowance"
      :title="'父母赡养补助'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <parentalSubsidies
        v-if="modal.supportAllowance"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('supportAllowance')"
        @supportAllowance="initData($event,'supportAllowance')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.notArmy"
      :title="'未随军无工作配偶生活补贴'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <noFollow
        v-if="modal.notArmy"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('notArmy')"
        @notArmy="initData($event,'notArmy')"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="modal.comfort"
      :title="'慰问、救济'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
      :append-to-body="true"
    >
      <comfort
        v-if="modal.comfort"
        :is-create="modal.isCreate"
        :edit-data="modal.data"
        @hideEditDialog="hideEditDialog('comfort')"
        @comfort="initData($event,'comfort')"
      />
    </el-dialog>
  </div>
</template>

<script>
import separation from '@/views/enjoy/separation.vue';
import NoEmploy from '@/views/enjoy/noEmploy.vue'
import { createFile, findObjArray } from '@/utils/utils'
import EducationFee from '@/views/enjoy/educationFee.vue'
import Provide from '@/views/enjoy/provide.vue'
import {save,exportRoster} from '@/api/enjoy'
import NoFollow from '@/views/enjoy/noFollow.vue'
import comfort from '@/views/enjoy/comfort.vue'
import parentalSubsidies from '@/views/enjoy/parentalSubsidies.vue'

export default {
  components: { NoFollow, Provide, EducationFee, NoEmploy, separation,parentalSubsidies,comfort, },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
  },
  data() {
    return {
      active:['1','2','3','4','5','6','7'],
      constants:this.$constants,
      row: {
        separation:[],
        noEmploy:[],
        educationFee:[],
        provide:[],
        supportAllowance:[],
        notArmy:[],
        comfort:[],
      },
      modal:{
        isCreate:false,
        data:null,
        separation:false,
        noEmploy:false,
        educationFee:false,
        provide:false,
        supportAllowance:false,
        notArmy:false,
        comfort:false,
      }
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    handlerOpenDel(type,index){
      this.$confirm('确认删除当前数据').then(() => {
        this.$delete(this.row[type],index)
      })
    },
    initData(data,type){
      const index=findObjArray(this.row[type],'id',data.id);
      if(index!==false){
        this.$set(this.row[type],index.index,data);
      }else{
        this.row[type].push(data);
      }
    },
    hideEditDialog(type){
      this.modal[type]=false;
    },
    openEdit(type,isCreate,dataIndex=null){
      this.modal[type]=true;
      this.modal.isCreate=isCreate;
      if(dataIndex!=null){
        this.modal.data=this.row[type][dataIndex]
      }
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      this.row=JSON.parse(JSON.stringify(this.editData));
      this.row.separation=this.row.separation?JSON.parse(this.row.separation):[];
      this.row.noEmploy=this.row.noEmploy?JSON.parse(this.row.noEmploy):[];
      this.row.educationFee=this.row.educationFee?JSON.parse(this.row.educationFee):[];
      this.row.provide=this.row.provide?JSON.parse(this.row.provide):[];
      this.row.supportAllowance=this.row.supportAllowance?JSON.parse(this.row.supportAllowance):[];
      this.row.notArmy=this.row.notArmy?JSON.parse(this.row.notArmy):[];
      this.row.comfort=this.row.comfort?JSON.parse(this.row.comfort):[];
    },
    handleSubmit(){
      const form={
        personId:this.editData.id,
        separation:JSON.stringify(this.row.separation),
        noEmploy:JSON.stringify(this.row.noEmploy),
        educationFee:JSON.stringify(this.row.educationFee),
        provide:JSON.stringify(this.row.provide),
        supportAllowance:JSON.stringify(this.row.supportAllowance),
        notArmy:JSON.stringify(this.row.notArmy),
        comfort:JSON.stringify(this.row.comfort),
      }
      const loading=this.$loading('保存中');
      save(form).then(res=>{
        this.$message.success('操作成功')
        this.close();
      }).finally(()=>{
        loading.close()
      })
    },
    //导出
    handlerExport() {
      let loading = this.$loading({
        lock: true,
        text: "导出中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const _pram = {personId: this.editData.id}
      exportRoster(_pram)
        .then((res) => {
          if(!createFile(res,'福利费享受统计')){
            this.$message.success("未知的文件格式");
          }
          loading.close();
        })
        .catch((res) => {
          loading.close();
        });
    },
  }
}
</script>

<style scoped>
.box::-webkit-scrollbar{
  width: 0;
}
</style>
